<template>
    <div class="price-container">
        <div class="price-subscribe1" v-if="subscribeType == 0">
            <div class="price-item">
                <div class="price-left">
                    <div class="price-date">一个月</div>
                    <div class="price-num">¥2148</div>
                    <div class="price-tip">随便一个小时级别信号止盈就能达标</div>
                </div>
                <div class="price-right">
                    <van-button class="price-u" type="primary" size="small" round @click="handleOpenPay(2)">299U</van-button>
                    <van-button type="primary" size="small" round color="#33333e" @click="handleOpenPay(1)">扫码转账</van-button>
                </div>
            </div>
            <div class="price-item">
                <div class="price-left">
                    <div class="price-date">一季度<span class="discount">(9折)</span></div>
                    <div class="price-num">¥5812</div>
                    <div class="price-tip">随便一个小时级别信号止盈就能达标</div>
                </div>
                <div class="price-right">
                    <van-button class="price-u" type="primary" size="small" round @click="handleOpenPay(2)">799U</van-button>
                    <van-button type="primary" size="small" round color="#33333e" @click="handleOpenPay(1)">扫码转账</van-button>
                </div>
            </div>
            <div class="price-item">
                <div class="price-left">
                    <div class="price-date">一年<span class="discount">(8折)</span></div>
                    <div class="price-num">¥20666</div>
                    <div class="price-tip">一个日线信号止盈能达成好几年会员</div>
                </div>
                <div class="price-right">
                    <van-button class="price-u" type="primary" size="small" round @click="handleOpenPay(2)">2868U</van-button>
                    <van-button type="primary" size="small" round color="#33333e" @click="handleOpenPay(1)">扫码转账</van-button>
                </div>
            </div>
        </div>
        <div class="price-subscribe2" v-else>
            <div class="single-tip">订阅单个策略 <span class="maincolor">单价</span> 如下，如若开启多个，建议开通一卡通</div>
            <div class="price-item">
                <div class="price-left">
                    <div class="price-date">一个月</div>
                    <div class="price-num">¥1208</div>
                    <div class="price-tip">随便一个小时级别信号止盈就能达标</div>
                </div>
                <div class="price-right">
                    <van-button class="price-u" type="primary" size="small" round @click="handleOpenPay(2)">168U</van-button>
                    <van-button type="primary" size="small" round color="#33333e" @click="handleOpenPay(1)">扫码转账</van-button>
                </div>
            </div>
            <div class="price-item">
                <div class="price-left">
                    <div class="price-date">一季度<span class="discount">(9折)</span></div>
                    <div class="price-num">¥3248</div>
                    <div class="price-tip">随便一个小时级别信号止盈就能达标</div>
                </div>
                <div class="price-right">
                    <van-button class="price-u" type="primary" size="small" round @click="handleOpenPay(2)">448U</van-button>
                    <van-button type="primary" size="small" round color="#33333e" @click="handleOpenPay(1)">扫码转账</van-button>
                </div>
            </div>
            <div class="price-item">
                <div class="price-left">
                    <div class="price-date">一年<span class="discount">(8折)</span></div>
                    <div class="price-num">¥11588</div>
                    <div class="price-tip">一个日线信号止盈能达成好几年会员</div>
                </div>
                <div class="price-right">
                    <van-button class="price-u" type="primary" size="small" round @click="handleOpenPay(2)">1608U</van-button>
                    <van-button type="primary" size="small" round color="#33333e" @click="handleOpenPay(1)">扫码转账</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'price',
    props: {
        subscribeType: {
            type: [String, Number],
            default: 1
        }
    },
    data() {
        return {
            price: 299,
        };
    },
    components: {},
    computed: {

        year() {
            return 299 * 12 * 0.8;
        }
    },
    watch: {},
    created() {

    },
    mounted() {
        this.init();
    },
    methods: {
        init() {

        },
        handleOpenPay(type) {
            this.$router.push({
                name: 'SettingPay',
                query: {
                    paytype: type
                }
            })
        }
       
        
    }
};
</script>
<style lang="less" scoped>
.single-tip {
    font-size: 13px;
    color: #333;
}
.price-item {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    border-radius: 8px;
    padding: 10px 16px;
    margin: 10px 0;
    .price-left {
        flex: 1;
        .price-date {
            font-weight: 500;
            font-size: 14px;
            color: #222;
            margin-bottom: 10x;
        }
        .price-num {
            color: var(--main-color);
            font-size: 20px;
            margin-top: 5px;
            font-weight: 600;
        }
        .price-tip {
            color: #5a5a5a;
            font-size: 12px;
        }
    }
    .discount {
        color: var(--main-color);
        font-weight: 600;
        font-size: 14px;
    }
    .price-right {
        display: flex;
        flex-direction: column;
        .price-u {
            margin-bottom: 4px;
        }
    }


    .van-button {
        padding: 0 20px;
    }
}

</style>